<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state状态</title>
</head>
<body>
      <!-- 准备容器 -->
  <div id="test"></div>
  <!-- 按照顺序引入 -->
  <script type="text/javascript" src="../../js/react.development.js"></script>
  <script type="text/javascript" src="../../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../../js/babel.min.js"></script>
  <script type="text/babel" >
    class Weather extends React.Component {
      constructor (props) { // 构造器只会调用一次
        super(props)
        // 初始化状态
        this.state = {isHot:false,wind:'微风'}
        this.changeWeather = this.changeWeather.bind(this)  // bind改变this的指向，构造器中的this就是Weather实例对象
      }
      render () { // render会调用1+n次  n是状态更新的次数
        console.log(this); // this指向Weather实例对象
        /*
          1.直接在标签上面绑定事件 尽量避免用到原生document.getElementById等方法
          2.onClick 必须用驼峰
          3.事件必须是一个函数  不可以用引号  函数后面不能加()进行调用  
        */
        return <h1 id="title" onClick={this.changeWeather}>今天天气很{this.state.isHot ?'炎热':'凉爽'},{this.state.wind}</h1>
      }
      changeWeather(){ // changeWeather 调用次数为点击的次数
        /*
          1. changeWeather放在Weather的原型对象上，供实例使用
          2.由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用的
          3.类中的方法会默认开启局部严格模式，babel也会开启严格模式，导致直接调用的this为undefined
        */
       console.log(this.state.isHot);
      //  this.state.isHot = !this.state.isHot // 状态里的数据不能做直接更改  要借助内置的API(setState)更改
        // 更新为合并状态，非替换  
        const isHot =  this.state.isHot
        this.setState({isHot:!isHot})
      }
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'))
    // const title = document.getElementById('title')
    /*title.onclick = ()=>{
      console.log(this);
      alert('被点击1')
    }*/
    /*title.addEventListener('click',()=>{
      console.log(this);
      alert('被点击了')
    })*/
    // function demo(){
    //   console.log(this);
    //   alert('被点击了')
    // }
  </script>
</body>
</html>